{extend name='common/common_layout'/}
{block name='source'}
    <link rel="stylesheet" href="__HOME__/css/movieplay.css">
    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__HOME__/js/movieplay.js"></script>
    <meta name="keywords" content="{$kw}">
    <meta name="description" content="{$desc}">
{/block}
{block name='title'}
    视频
{/block}
{block name='center'}
<!-- banner redirect_url img_url -->
<header class="carousel">
    <div class="box">
        {foreach $banner as $b}
            <img src="{$b.img_url}" alt="{$b.img_url}">
        {/foreach}
    </div>
    <div class="buttons">
        {foreach $banner as $index => $b}
            {if $index == 0}
            <div class="active" i='{$index}'></div>
            {else}
            <div i='{$index}'></div>
            {/if}
        {/foreach}
    </div>
    <div class="left">
        <div class="arrow" style="background-image: url(__IMAGE__/home/index/banner-left.png);"></div>
    </div>
    <div class="right">
        <div class="arrow" style="background-image: url(__IMAGE__/home/index/banner-right.png);"></div>
    </div>
</header>
<!-- END -->
<div id="detail">
    <div class="layui-row">
        <div class="layui-col-md12">
            <h2>最新视频</h2>
        </div>
    </div>
    <div class="show_list" id="movies">
        {foreach $movies as $index => $movie}
        {if $index <= 3}
        <div class="movie-container">
            <div class="movie_border">
                <a href="javascript:;" onclick="playvedio('{$movie.iframe_url}','{$movie.id}')">
                    <div class="layui-col-md12 movie_img_box">
                        <div class="movie_img_btn"></div>
                        <div class="movie_img_backcolor"></div>
                        <img src="{$movie.image}" alt="{$movie.title}">
                    </div>
                </a>
                <div class="layui-col-md12 movie_message">
                    <div class="movie-title">{$movie.title}</div>
                    <div class="movie_bottom">
                        <span style="position: relative">{$movie.source}</span>
                        <span class="add_time">{$movie.addtime}</span>
                    </div>

                </div>
            </div>
        </div>
        {else}
        <div class="movie-container" style="display: none;opacity: 0; max-height: 0px; overflow: hidden;">
            <div class="movie_border">
                <a href="javascript:;" onclick="playvedio('{$movie.iframe_url}','{$movie.id}')">
                    <div class="layui-col-md12 movie_img_box">
                        <div class="movie_img_btn"></div>
                        <div class="movie_img_backcolor"></div>
                        <img src="{$movie.image}" alt="{$movie.title}">
                    </div>
                </a>
                <div class="layui-col-md12 movie_message">
                    <div class="movie-title">{$movie.title}</div>
                    <div class="movie_bottom">
                        <span style="position: relative">{$movie.source}</span>
                        <span class="add_time">{$movie.addtime}</span>
                    </div>

                </div>
            </div>
        </div>
        {/if}
        {/foreach}

    </div>
    <button type="button" class="layui-btn layui-btn-primary more" onclick="getMore()">查看更多资讯</button>
</div>
{/block}
{block name='right'}
<div class="hot-message">
    <div class="hot-title">
        <!--                        <i class="layui-icon layui-icon-fire"></i>-->
        <div style="height: 3vw;font-size: 1.5rem;">
            <img src="__IMAGE__/common/fire.png" style="position: relative; width: 2vw;object-fit: contain;padding-bottom: 10px;">热门推荐
        </div>
    </div>
    <hr class="layui-bg-gray">
    <ol>
        {foreach $movie_hot1 as $key => $item}
        <li>
            <div class="hot-box">
                <a href="javascript:;" onclick="playvedio('{$item.iframe_url}','{$item.id}')">
                    <div class="top-box">
                        <div class="movie_img_btn"></div>
                        <div class="movie_img_backcolor"></div>
                        <img src="{$item.image}" class="hot1">
                        <div class="top">Top {$key+1}</div>
                    </div>

                    <div class="hot-massage-title1">{$item.title}</div>
                </a>
            </div>
        </li>
        {/foreach}

        {foreach $movie_hot2 as $key => $item}
        <li>
            <div class="hot-box layui-row">
                <a href="javascript:;"
                    onclick="playvedio('{$item.iframe_url}','{$item.id}')">
                    <div class="layui-col-md3 hot-box2">
                        <div class="movie_img_btn"></div>
                        <div class="movie_img_backcolor"></div>
                        <img src="{$item.image}" class="hot2">
                        <div class="top1">{$key+3}</div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="hot_title">{$item.title}</div>
                        <div class="hot_title_time2">{$item.addtime}</div>
                    </div>
                </a>

            </div>
        </li>
        {/foreach}

    </ol>


</div>
{/block}